var Sprite = function(x,y,w,h,v,option){
	this.x = x;
	this.y = y;
	this.width = w;
	this.height = h;
	this.option = option;
	this.state = 0;//状态机0为没按下，1为已按下
	this.value = v;
	
		var y = (this.height)/2+this.y;
		var x = (this.width)/2+this.x;
		console.log(this.y);
		console.log(this.height);
		console.log(x);
		console.log(y);
	//this.t = setInterval((function(myself){return function(){myself.move();}})(this),30);
}
Sprite.prototype = {
	draw:function(ctx){
		ctx.beginPath();
		if(this.state == 0){
			ctx.fillStyle = "#3345ff";
			ctx.fillRect(this.x,this.y,this.width,this.height);
		}else{
			ctx.strokeStyle = this.option.strokeStyle;
			ctx.lineWidth = this.option.lineWidth;
			ctx.strokeRect(this.x,this.y,this.width,this.height);
		}
		ctx.stroke();
		ctx.fillStyle = "#00ffff";
		var y = (this.height)/2+this.y;
		var x = (this.width)/2+this.x;
		ctx.fillText(this.value,x,y);
	},
	move:function(){
		
	},
	stop:function(){
		clearInterval(this.t);
	},
	ontouchstart:function(e){
	},
	ontouchend:function(e){
	},
	ontouchmove:function(e){
	},
	onclick:function(e){
		this.changeDownState();
	},
	changeDownState:function(){
		this.state = 1;
		console.log(this.value);
	}
}
var Frame = function(cWidth,cHeight){
	this.sprites = [];
	this.canvasWidth = cWidth;
	this.canvasHeight = cHeight;
	
	this.fullSquares();
	this.maps = [];
}
Frame.prototype = {
	draw:function(ctx){
		for(var i in this.sprites){
			var item = this.sprites[i];
			item.draw(ctx);
		}
	},
	fullSquares:function(){
		this.xSpriteSize = 10;
		this.ySpriteSize = 8;
		this.spriteWidth = this.canvasWidth/this.xSpriteSize;
		this.spriteHeight = this.canvasHeight/this.ySpriteSize;
		this.amount = this.xSpriteSize*this.ySpriteSize;
		for(var i=0;i<this.amount;i++){
			var x=(i%this.xSpriteSize)*this.spriteWidth;
			var y=Math.floor(i/this.xSpriteSize)*this.spriteHeight;
			var radiu=Math.random()*20;
			var r=Math.floor(Math.random()*256);
			var g=Math.floor(Math.random()*256);
			var b=Math.floor(Math.random()*256);
			var a=Math.random();
			var option={
				strokeStyle:'rgba('+r+','+g+','+b+','+a+')',
				lineWidth:Math.random()*10
			};
			this.sprites[i]=new Sprite(x,y,this.spriteWidth,this.spriteHeight,999,option);
		}
	},
	ontouchstart:function(e){
		console.log(e);
		/*
		for(var i in this.sprites){
			var item = this.sprites[i];
			item.ontouchstart(ctx);
		}
		*/
	},
	ontouchend:function(e){
		console.log(e);
		/*
		for(var i in this.sprites){
			var item = this.sprites[i];
			item.ontouchend(ctx);
		}*/
	},
	ontouchmove:function(e){
		console.log(e);
		/*
		for(var i in this.sprites){
			var item = this.sprites[i];
			item.ontouchmove(ctx);
		}
		*/
	},
	onclick:function(e){
		var offX = e.offsetX;
		var offY = e.offsetY;
		for(var i in this.sprites){
			var item = this.sprites[i];
			if((item.x<=offX&&item.x+this.spriteWidth>=offX)&&(item.y<=offY&&item.y+this.spriteHeight>=offY)){
				item.onclick(e);
				break;
			}
		}
	}
}
var Scence = function(canvasId,canWidth,canHeight){
	this.canvas = document.getElementById(canvasId);
	this.canvas.width = canWidth;
	this.canWidth = canWidth;
	this.canHeight = canHeight;
	this.canvas.height = canHeight;
	this.context2d = this.canvas.getContext("2d");
	this.frames = [];
	this.canvas.addEventListener("ontouchstart",this.ontouchstart,false);
	this.canvas.addEventListener("ontouchend",this.ontouchend,false);
	this.canvas.addEventListener("ontouchmove",this.ontouchmove,false);
	this.canvas.addEventListener("click",this.onclick(this),false);
}
Scence.prototype = {
	draw:function(ctx){
		ctx.clearRect(0,0,this.canWidth,this.canHeight);
		for(var i in this.frames){
			var item = this.frames[i];
			item.draw(ctx);
		}
	},
	start:function(){
		setInterval((function(obj){return function(){obj.draw(obj.context2d);}})(this),30);
	},
	ontouchstart:function(e){
		for(var i in this.frames){
			var item = this.frames[i];
			item.ontouchstart(ctx);
		}
	},
	ontouchend:function(e){
		for(var i in this.frames){
			var item = this.frames[i];
			item.ontouchend(ctx);
		}
	},
	ontouchmove:function(e){
		for(var i in this.frames){
			var item = this.frames[i];
			item.ontouchmove(ctx);
		}
	},
	onclick:function(obj){
		return function(e){
			for(var i in obj.frames){
				var item = obj.frames[i];
				item.onclick(e);
			}
		}
	}
}